<template>
    <el-container class="home-container">
        <el-header class="header">
            <el-row>
                <el-col :span="6" style="text-align: center; line-height: 60px;">
                    <div class="logo">学之思考试系统</div>
                </el-col>
                <el-col :span="18" style="text-align: right;line-height: 60px">
                    <el-button type="primary" plain @click="logout">退出登录</el-button>
                </el-col>
            </el-row>
        </el-header>
<!--        页面主体-->
        <el-container>
<!--            侧边栏-->
            <el-aside :width="isCollapse ? '64px' : '200px'" style="background-color: #333744">
<!--                菜单栏展开-->
                <div class="toggle-button" @click="toggleCollapse">|||</div>
<!--                侧边栏菜单-->
                <el-menu :collapse-transition="false" unique-opened :collapse="isCollapse" style="border: none;" background-color="#333744" text-color="#fff" active-text-color="#409eff">
                    <el-submenu :index="item.id+''" v-for="item in menulist" :key="item.id">
<!--                        一级菜单-->
                        <template slot="title"><i :class="iconsObj[item.id]"></i><span>{{item.authName}}</span></template>
<!--                        二级菜单-->
                        <el-menu-item :index="children.id + ''" v-for="children in item.children"
                                      :key="children.id">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span>{{children.authName}}</span>
                            </template>

                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
  export default {
    name: 'Home',
    created() {
      this.getMenuList()
    },
    data(){
      return {
        menulist: [],
        iconsObj: {
          '125': 'el-icon-coordinate',
          '103': 'el-icon-connection',
          '101': 'el-icon-shopping-cart-full',
          '102': 'el-icon-postcard',
          '145': 'el-icon-s-data'
        },
        isCollapse: false
      }
    },
    methods: {
      logout() {
        window.sessionStorage.clear()
        this.$router.replace('/')
      },
      // 获取所有菜单
      async getMenuList() {
        const {data:res} = await this.$http.get('menus')
        console.log(res)
        if (res.meta.status !== 200) {
          return this.$message.error(res.meta.msg)
        }
        this.menulist = res.data
      },
      // 切换菜单折叠打开
      toggleCollapse() {
        this.isCollapse = ! this.isCollapse
      }
    }
  }
</script>

<style scoped>
    .home-container {
        height: 100%;
    }

    .header {
        width: 100%;
        height: 100%;
        background: #373d41;
    }

    .logo {
        color: #ffffff;
        font-size: 24px;
        cursor: pointer;
    }
    .toggle-button{
        background-color: #4a5064;
        font-size: 10px;
        line-height: 24px;
        color: #ffffff;
        text-align: center;
        letter-spacing: 0.2em;
        cursor: pointer;
    }
</style>
